<template>
  <!-- 注册内容 -->
  <div class="register">
      <h3>注册新用户
          <span class="go">我有账号，去 <router-link to="/login">登陆</router-link>
          </span>
      </h3>
      <div class="content">
          <label>手机号:</label>
          <input type="text" placeholder="请输入你的手机号" v-model="registerParams.phone">
      </div>
      <div class="content">
          <label>验证码:</label>
          <input type="text" placeholder="请输入验证码" v-model="registerParams.code" />
          <button class="auth" @click="reqUserInfo" style="height: 38px; margin-left: 5px;">获取验证码</button>
      </div>
      <div class="content">
          <label>登录密码:</label>
          <input type="text" placeholder="请输入你的登录密码"  v-model="registerParams.password">
      </div>
      <div class="content">
          <label>确认密码:</label>
          <input type="text" placeholder="请输入确认密码" v-model="registerParams.repassword">
      </div>
      <div class="controls">
          <input name="m1" type="checkbox" v-model="registerParams.agree">
          <span>同意协议并注册<span style="color: #f93684;" >《用户协议》</span></span>
      </div>
      <div class="btn">
        <button @click="register">完成注册</button>
      </div>
  </div>
</template>

<script setup lang="ts">
//引入组合式API
import { reactive, ref } from 'vue'
//引入提示信息组件
import { ElMessage } from 'element-plus'
//引入请求函数
import { reqLogin, reqUserInfo } from '../../api/login'
import router from '../../route';

//reqPassport, reqRegister

//注册用户携带参数
let registerParams = reactive({
  phone: '',
  password: '',
  repassword: '',
  code: '',
  agree: false
})
//获取验证码
const getUserInfoCode = async () => {
  if (!registerParams.phone) return
  let result = await reqLogin(registerParams.phone)
  registerParams.code = result.data
}

//注册用户
const register = async () => {
  let { phone, password, repassword, code, agree } = registerParams
  if (!phone) {
    ElMessage.warning('请输入用户名')
    return
  }
  if (password !== repassword) {
    ElMessage.warning('两次密码不一致')
    return
  }
  if (!password) {
    ElMessage.warning('请输入密码')
    return
  }
  if (!code) {
    ElMessage.warning('验证码不能为空')
    return
  }
  if (!agree) {
    ElMessage.warning('请您认真阅读协议并勾选！')
    return
  }
  let result = await reqUserInfo({ phone, password, code })
  if (result.code !== 200){
    ElMessage({
      type:'warning',
      message:result.message
    })
  }
  ElMessage.success('注册成功！')
  router.push('/enter')


}
</script>

<style scoped>
.register {
  width: 1200px;
  height: 445px;
  border: 1px solid #dfdfdf;
  margin: 0 auto;
}

.register h3 {
  background: #ececec;
  margin: 0;
  padding: 6px 15px;
  color: #333;
  border-bottom: 1px solid #dfdfdf;
  font-size: 20.04px;
  line-height: 30.06px;
}

.register h3 span {
  font-size: 14px;
  float: right;
}

.register h3 span a {
  color: #e1251b;
}

.register div:nth-of-type(1) {
  margin-top: 40px;
}

.register .content {
  padding-left: 390px;
  margin-bottom: 18px;
  position: relative;
}

.register .content label {
  font-size: 14px;
  width: 96px;
  text-align: right;
  display: inline-block;
}

.register .content input {
  width: 270px;
  height: 38px;
  padding-left: 8px;
  box-sizing: border-box;
  margin-left: 5px;
  outline: none;
  border: 1px solid #999;
}

.register .content img {
  vertical-align: sub;
}

.register .controls {
  text-align: center;
  position: relative;
}

.register .controls input {
  vertical-align: middle;
}

.register .btn {
  text-align: center;
  line-height: 36px;
  margin: 17px 0 0 55px;
}

.register .btn button {
  outline: none;
  width: 270px;
  height: 36px;
  background: #e1251b;
  color: #fff !important;
  display: inline-block;
  font-size: 16px;
}
</style>